<template>
  <div>
    <recorder v-on:onmessage="onmessage"></recorder>
    <el-table class="zf-reglist"
              :data="tableData"
              stripe
              style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="similarity"
        label="相似度"
        width="100">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>

  import Recorder from "./Recorder.vue";
  export default {
    components: {
      Recorder
    },
    name: 'Index',
    data () {
      return {
        recording:false,
        tableData1: [{
          name: '小纪',
          similarity: 0.58123
        }, {
          name: '小虎',
          similarity: 0.59123
        }, {
          name: '小王',
          similarity: 0.38123
        }, {
          name: '老虎',
          similarity: 0.28123
        }],
        socketData:''
      }
    },
    methods:{
      recBtnClick(){
        this.recording = !this.recording
      },
      onmessage(data){
        this.socketData = data
      }
    },
    computed:{
      tableData(){
        let strs = this.socketData.split(' ')
        let result = []
        strs.forEach(
          (str) =>{
            let segs = str.split(':')
            result.push({
              name: segs[0],
              similarity: segs[1]
            })
          }
        )
        return result
      }
    }
  }
</script>


<style scoped>
  .zf-record{
    font-size:90px;
    padding:20px
  }

  .zf-reglist{
    margin-top: 100px;
    font-size: large;
  }
</style>
